<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页加载时缩小图片</title>
</head>

<body onload="reduce()">
<img src="image1.jpg" id="img1" onmouseout="reduce()" onmouseover="blowup()"><!--在图片标记中调用相关事件-->
<script type="text/javascript">
var h=0;//初始化高度
var w=0;//初始化宽度
function reduce(){//缩小图片
    h=img1.height;//获取图片的原始高度
    w=img1.width;//获取图片的原始宽度
    img1.height=h-100;//缩小图片的高度
    img1.width=w-100;//缩小图片的宽度
}
function blowup(){//恢复图片的原始大小
    img1.height=h;//恢复图片为原始高度
    img1.width=w;//恢复图片为原始宽度
}
</script>
</body>
</html>
